<!-- 搜索律师、法院等页面的顶部搜索组件 -->
<template>
	<u-sticky>
		<view class="search-box" style="width: 750rpx; background-color: #FFFFFF;">
			<u-search
				:placeholder="placeholder"
				shape="square"
				:focus="focus"
				v-model="keyword"
				margin="20rpx"
				:show-action="false"
				input-align="left"
				@change="searchChange"
			></u-search>
		</view>
	</u-sticky>
</template>

<script>
export default {
	props: {
		// 搜索框中的提示文字
		placeholder: {
			type: String,
			default: '搜索'
		},
		// 是否自动获得焦点
		focus: {
			type: Boolean,
			default: false
		}
	},
	name: 'search',
	data() {
		return {
			keyword: '',
			isInput: false // 节流阀，false 为默认关闭节流阀的状态
		};
	},
	methods: {
		// 搜索框内容发生变化时触发
		searchChange() {
			// 判断节流阀的状态,为 true 则 return 出去
			if (this.isInput) return;
			this.isInput = true;
			setTimeout(() => {
				// console.log(this.keyword);
				this.$emit('change', this.keyword);
				this.isInput = false;
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
.search-box {
	// border-top: 1rpx solid #e1e6ef;
	padding: 0 15rpx;
}
</style>
